import React, { useState } from "react";
import "../assets/css/shouyeshouqi.css";
import axios from "axios";

export default function NewCustomerModal({ isVisible, onClose }) {
  // 初始化表单数据
  const [formData, setFormData] = useState({
    id: "",
    kename: "",
    keuser: "",
    kehang: "",
    kegui: "",
    qianname: "",
    qianlianxi: "",
    qianshouji: "",
    qianyouxiang: "",
    guanname: "",
    guanzheng: "",
    guanshou: "",
    guanyouxiang: "",
  });

  // 表单数据变化处理
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData((prevData) => ({
      ...prevData,
      [name]: value,
    }));
  };
  const handleSave = () => {
    axios.post("http://172.16.17.119:8080/xinjian", formData).then((res) => {
      console.log(res.data);
      alert("客户信息保存成功！");
      // 清空表单数据
      setFormData({
        id: "",
        kename: "",
        keuser: "",
        kehang: "",
        kegui: "",
        qianname: "",
        qianlianxi: "",
        qianshouji: "",
        qianyouxiang: "",
        guanname: "",
        guanzheng: "",
        guanshou: "",
        guanyouxiang: "",
      });
      onClose(); // 关闭模态框
    });
  };

  if (!isVisible) {
    return null; // 如果不显示，返回 null
  }

  return (
    <div className="zleft-mask">
      <div className="zmask-contentzuo">
        <div className="zxinjiankehuzuotou">
          <div className="zxinjiankehuzuotouyi">新建客户</div>
          <div className="zxinjiankehuzuotouer" onClick={onClose}>
            ×
          </div>
        </div>
        <div className="zxinjiankehuzuoser">客户信息</div>
        <div className="zxinjiankehuzuozhoyi">
          <div>
            <div className="zxinjiankehuzuoxing">
              <span>* </span>客户名称
            </div>
            <input
              className="zxinjianzuoshangxuanz"
              type="text"
              id=""
              placeholder="请输入"
              name="kename"
              value={formData.kename}
              onChange={handleInputChange}
            />
          </div>
          <div>
            <div className="zxinjiankehuzuoxing">
              <span>* </span>客户类型
            </div>
            <select
              name="keuser"
              value={formData.keuser}
              onChange={handleInputChange}
              className="zxinjianzuoshangxuanz"
            >
              <option value="">请选择</option>
              <option>傻逼1</option>
              <option>选项2</option>
              <option>选项3</option>
            </select>
          </div>
          <div>
            <div className="zxinjiankehuzuoxingg">行业</div>
            <select
              name="kehang"
              value={formData.kehang}
              onChange={handleInputChange}
              className="zxinjianzuoshangxuanz"
            >
              <option value="">请选择</option>
              <option>选项1</option>
              <option>选项2</option>
              <option>选项3</option>
            </select>
          </div>
          <div>
            <div className="zxinjiankehuzuoxingg">人员规模</div>
            <select
              name="kegui"
              value={formData.kegui}
              onChange={handleInputChange}
              className="zxinjianzuoshangxuanz"
            >
              <option value="">请选择</option>
              <option>选项1</option>
              <option>选项2</option>
              <option>选项3</option>
            </select>
          </div>
        </div>
        <div className="zxinjiankehuzuoser">签约联系人</div>
        <div className="zxinjiankehuzuozhoyi">
          <div>
            <div className="zxinjiankehuzuoxinggg">联系人姓名</div>
            <input
              className="zxinjianzuoshangxuanz"
              type="text"
              name="qianname"
              value={formData.qianname}
              onChange={handleInputChange}
              id=""
              placeholder="请输入"
            />
          </div>
          <div>
            <div className="zxinjiankehuzuoxinggg">联系人职务</div>
            <input
              className="zxinjianzuoshangxuanz"
              type="text"
              name="qianlianxi"
              value={formData.qianlianxi}
              onChange={handleInputChange}
              id=""
              placeholder="请输入"
            />
          </div>
          <div>
            <div className="zxinjiankehuzuoxingg">联系人手机号</div>
            <div>
              <select className="zxinjianzuoshangxuanzz">
                <option value="">中国+86</option>
                <option>选项1</option>
                <option>选项2</option>
                <option>选项3</option>
              </select>
              <input
                name="qianshouji"
                value={formData.qianshouji}
                onChange={handleInputChange}
                className="zxinjianzuoshangxuanzzz"
                type="text"
                placeholder="请输入"
              />
            </div>
          </div>
          <div>
            <div className="zxinjiankehuzuoxingg">联系人邮箱</div>
            <input
              className="zxinjianzuoshangxuanz"
              type="text"
              name="qianyouxiang"
              value={formData.qianyouxiang}
              onChange={handleInputChange}
              id=""
              placeholder="请输入"
            />
          </div>
        </div>
        <div className="zxinjiankehuzuoser">租期管理员</div>
        <div className="zxinjiankehuzuozhoyi">
          <div>
            <div className="zxinjiankehuzuoxinggg">管理员姓名</div>
            <input
              className="zxinjianzuoshangxuanz"
              type="text"
              name="guanname"
              value={formData.guanname}
              onChange={handleInputChange}
              id=""
              placeholder="请输入"
            />
          </div>
          <div>
            <div className="zxinjiankehuzuoxinggg">管理员证件号</div>
            <input
              className="zxinjianzuoshangxuanz"
              type="text"
              name="guanzheng"
              value={formData.guanzheng}
              onChange={handleInputChange}
              id=""
              placeholder="请输入"
            />
          </div>
          <div>
            <div className="zxinjiankehuzuoxingg">管理员手机号</div>
            <div>
              <select className="zxinjianzuoshangxuanzz">
                <option value="">中国+86</option>
                <option>选项1</option>
                <option>选项2</option>
                <option>选项3</option>
              </select>
              <input
                className="zxinjianzuoshangxuanzzz"
                type="text"
                placeholder="请输入"
                name="guanshou"
                value={formData.guanshou}
                onChange={handleInputChange}
              />
            </div>
          </div>
          <div>
            <div className="zxinjiankehuzuoxingg">管理员邮箱</div>
            <input
              className="zxinjianzuoshangxuanz"
              type="text"
              name="guanyouxiang"
              value={formData.guanyouxiang}
              onChange={handleInputChange}
              id=""
              placeholder="请输入"
            />
          </div>
        </div>
        <div className="zxinjiankehubaocun" onClick={handleSave}>
          保存
        </div>
      </div>
    </div>
  );
}
{
  /* </div>
        </div>
        <div className="zxinjiankehuzuoser">客户信息</div>
        <div className="zxinjiankehuzuozhoyi">
          <div>
            <div className="zxinjiankehuzuoxing">ID</div>
            <input
              className="zxinjianzuoshangxuanz"
              type="text"
              name="id"
              value={formData.id}
              onChange={handleInputChange}
              placeholder="请输入"
            />
          </div>
          <div>
            <div className="zxinjiankehuzuoxing">客户名称</div>
            <input
              className="zxinjianzuoshangxuanz"
              type="text"
              name="kename"
              value={formData.kename}
              onChange={handleInputChange}
              placeholder="请输入"
            />
          </div>
          <div>
            <div className="zxinjiankehuzuoxing">客户类型</div>
            <input
              className="zxinjianzuoshangxuanz"
              type="text"
              name="keuser"
              value={formData.keuser}
              onChange={handleInputChange}
              placeholder="请输入"
            />
          </div>
          <div>
            <div className="zxinjiankehuzuoxing">行业</div>
            <input
              className="zxinjianzuoshangxuanz"
              type="text"
              name="kehang"
              value={formData.kehang}
              onChange={handleInputChange}
              placeholder="请输入"
            />
          </div>
          <div>
            <div className="zxinjiankehuzuoxing">人员规模</div>
            <input
              className="zxinjianzuoshangxuanz"
              type="text"
              name="kegui"
              value={formData.kegui}
              onChange={handleInputChange}
              placeholder="请输入"
            />
          </div>
          <div>
            <div className="zxinjiankehuzuoxing">签约联系人</div>
            <input
              className="zxinjianzuoshangxuanz"
              type="text"
              name="qianname"
              value={formData.qianname}
              onChange={handleInputChange}
              placeholder="请输入"
            />
          </div>
          <div>
            <div className="zxinjiankehuzuoxing">联系人联系方式</div>
            <input
              className="zxinjianzuoshangxuanz"
              type="text"
              name="qianlianxi"
              value={formData.qianlianxi}
              onChange={handleInputChange}
              placeholder="请输入"
            />
          </div>
        </div>
        <div className="zxinjiankehubaocun" onClick={handleSave}>
          保存
        </div>
      </div>
    </div>
  );
} */
}
